<template>
  <div class="register">
    <!-- 注册框 -->
    <div class="register-modal">
      <!-- 小米Logo -->
      <div class="register-logo">
        <img src="/Login/logo-mi.png" alt="" />
      </div>
      <!-- 注册小米账号 -->
      <div class="register-title">
        <p>注册小米账号</p>
      </div>
      <!-- 国家地区 -->
      <div class="register-country">
        <p class="country-title">国家/地区</p>
        <input type="text" placeholder="中国" />
        <br />
        <p class="country-tips">成功注册账号后，国家/地区将不能被修改</p>
      </div>
      <!-- 手机号码 -->
      <div class="register-phone">
        <p class="phone-title">手机号码</p>
        <input type="text" placeholder="请输入手机号码" />
        <br />
        <p class="phone-tips"></p>
      </div>
      <!-- 登录 -->
      <div class="signin">
        <a href="javascript:;" class="sumbit">登录</a>
      </div>
      <div class="agreement">
        <input type="checkbox" name="fff" /><span>
          注册账号即代表您同意并愿意遵守小米 <a href="">用户协议</a> 和
          <a href="">隐私政策</a></span
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  beforeCreate() {
    document.querySelector("body").setAttribute("style", "background: red");
  },
  beforeDestroy() {
    document.querySelector("body").removeAttribute("style");
  },
};
</script>

<style lang='scss' scoped>
.register {
  padding-top: 177px;
  .register-modal {
    width: 850px;
    height: 565px;
    background-color: #ffffff;
    margin: 0 auto;
    // border: 1px solid black;
    .register-logo {
      margin: 0 auto;
      width: 50px;
      height: 50px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .register-title {
      p {
        text-align: center;
        font-size: 30px;
        line-height: 118px;
        color: #333333;
      }
    }
    .register-country {
      width: 334px;
      height: 84px;
      margin: 0 auto;
      margin-bottom: 22px;
      // border: solid 1px #e5e5e5;
      .country-title {
        line-height: 30px;
        font-size: 14px;
        text-align: left;
        color: #333333;
      }
      .country-tips {
        line-height: 30px;
        font-size: 14px;
        color: #999999;
        text-align: left;
      }
      input {
        width: 332px;
        height: 42px;
        border: solid 1px #e5e5e5;
      }
    }
    .register-phone {
      width: 334px;
      height: 84px;
      margin: 0 auto;
      margin-bottom: 43px;

      // border: solid 1px #e5e5e5;
      .phone-title {
        line-height: 30px;
        font-size: 14px;
        text-align: left;
        color: #333333;
      }
      .phone-tips {
        line-height: 30px;
        font-size: 14px;
        text-align: left;
      }
      input {
        width: 332px;
        height: 42px;
        border: solid 1px #e5e5e5;
      }
    }
    .signin {
      text-align: center;
      .sumbit {
        display: inline-block;
        font-size: 16px;
        color: #ffffff;
        padding: 17px 158px;
        background-color: #ff6600;
        margin-top: 30px;
        text-decoration: none;
        margin-bottom: 52px;
      }
    }
    .agreement {
      text-align: center;
      input {
        font-size: 12px;
        vertical-align: middle;
        margin-bottom: 3px;
        border-radius: 50%;
      }
      span {
        font-size: 14px;
        color: #999999;
        a {
          font-weight: bold;
          color: black;
        }
      }
    }
  }
}
</style>